<template>
  <a-card hoverable class="cover" size="small">
    <template #cover>
      <a-image :src="filelink" />
    </template>
    <a-card-meta class="meta" size="small" :style="{ paddingTop: '0px' }">
      <template #description>
        <a-tag
          v-for="(tag, index) in myTagList"
          :key="index"
          :color="tagColor[index % 5]"
          closable
          @close="delPicTag(JSON.parse(tag.split(':')[0]))"
          >{{ tag.split(':')[1] }}</a-tag
        >

        <a-dropdown placement="topLeft">
          <ellipsis-outlined
            key="ellipsis"
            size="large"
            :style="{ float: 'right', fontWeight: 'bold', color: 'black' }"
          />

          <template #overlay>
            <a-menu>
              <a-menu-item v-if="optionTagList.length > 0">
                <a @click="showAddTagModal()">添加标签 </a>
              </a-menu-item>

              <a-menu-item>
                <a @click="showMoveModal()">移动至其他相册</a>
              </a-menu-item>
              <a-menu-item>
                <a @click="del()" v-bind="optionAlbumList.length > 0">删除</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </template>
    </a-card-meta>

    <a-modal v-model:visible="moveVisible" title="移动照片至其他相册">
      <a-form :model="moveAlbumState">
        <a-form-item
          label="目标相册"
          name="targetAlbumId"
          :rules="[{ required: true, message: '请选择要合并到的相册!' }]"
        >
          <a-select
            v-model:value="moveAlbumState.targetAlbumId"
            placeholder="请选择相册"
          >
            <a-select-option
              v-for="(album, index) in optionAlbumList"
              :key="index"
              :value="album.albumId"
              >{{ album.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button key="back" @click="cancelMove()">取消</a-button>
        <a-button key="submit" type="primary" @click="move()">提交</a-button>
      </template>
    </a-modal>

    <a-modal v-model:visible="addTagVisible" title="添加标签">
      <a-form :model="addTagState">
        <a-form-item
          label="标签"
          name="tagId"
          :rules="[{ required: true, message: '请选择标签!' }]"
        >
          <a-select v-model:value="addTagState.tagId" placeholder="请选择标签">
            <a-select-option
              v-for="(tag, index) in optionTagList"
              :key="index"
              :value="tag.tagId"
              >{{ tag.tagName }}</a-select-option
            >
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button key="back" @click="cancelAddPicTag()">取消</a-button>
        <a-button key="submit" type="primary" @click="addPicTag()"
          >提交</a-button
        >
      </template>
    </a-modal>
  </a-card>
</template>

<style scoped lang="less">
.cover {
  width: 250px;
  border-radius: 10px;
  border: none;
  :global(.cover .ant-card-cover img) {
    border: 1px solid #f0f0f0;
    border-radius: 10px;
  }
}

.meta {
  text-align: left;
  // :global(.ant-card-small > .ant-card-body) {
  //   padding-top: 4px;
  // }
}
</style>

<script lang="ts">
import { createVNode, defineComponent, onMounted, reactive, ref } from 'vue';
import {
  EllipsisOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons-vue';
import { albumList } from '@/apis/album';
import { addTag, delTag, getTagList } from '@/apis/tag';
import { movePicture, delPicture } from '@/apis/picture';
import { message, Modal } from 'ant-design-vue';

interface AlbumType {
  name: string;
  description: string;
  size: null | number;
  albumId: number;
  isDefaultAlbum: number;
  coverLink: null | string;
  createTime: string;
  updateTime: string;
}

interface MoveAlbumState {
  targetAlbumId: number;
  picId: number;
}

interface TagType {
  tagId: number;
  tagName: string;
}

interface AddTagState {
  tagId: number;
}

export default defineComponent({
  components: {
    EllipsisOutlined
  },
  props: [
    'picid',
    'albumid',
    'filesize',
    'filelink',
    'filename',
    'tags',
    'tagList',
    'albumList'
  ],
  setup(props, { emit }) {

    // 删除照片
    const del = () => {
      Modal.confirm({
        content: '该操作会将照片放入回收站, 您确定要删除吗？',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        onOk() {
          delPicture([props.picid]).then((res) => {
            message.success('照片已放入回收站！');
            emit('on-refresh');
          });
        },
        cancelText: '取消',
        onCancel() {
          Modal.destroyAll();
        }
      });
    };

    // 移动照片
    const moveVisible = ref<boolean>(false);
    const optionAlbumList = ref<Array<AlbumType>>([]);
    const moveAlbumState = reactive<MoveAlbumState>({
      targetAlbumId: props.albumid,
      picId: props.picid
    });

    const albumFilter = (album: AlbumType) => {
      return album.albumId != moveAlbumState.targetAlbumId;
    };

    const showMoveModal = () => {
      albumList().then((res) => {
        optionAlbumList.value = res.data.list.filter(albumFilter);
        moveAlbumState.targetAlbumId = optionAlbumList.value[0].albumId;
        moveVisible.value = true;
      });
    };

    const move = () => {
      const { picId, targetAlbumId } = moveAlbumState;
      movePicture(targetAlbumId, [picId]).then((res) => {
        message.success('移动至其他相册成功！');
        moveVisible.value = false;
        emit('on-refresh');
      });
    };

    const cancelMove = () => {
      moveVisible.value = false;
    };

    const tagColor = ['pink', 'red', 'orange', 'green', 'purple'];

    const delPicTag = (tagId: number) => {
      delTag(tagId, props.picid).then((res) => {
        message.success('删除标签成功');
        emit('on-refresh');
      });
    };

    const myTagList = ref<Array<string>>(
      props.tags === null ? [] : props.tags.split(',')
    );

    const optionTagList = ref<Array<TagType>>([]);

    const addTagVisible = ref<boolean>(false);

    const addTagState = reactive<AddTagState>({
      tagId: 0
    });

    const tagFilter = (tag: TagType) => {
      const flag = ref<boolean>(true);
      for (let i = 0; i < myTagList.value.length; i++) {
        const tagInfo = myTagList.value[i].split(':');
        if (parseInt(tagInfo[0]) === tag.tagId) {
          return false;
        }
      }
      return flag;
    };

    const showAddTagModal = () => {
      getTagList().then((res) => {
        optionTagList.value = res.data.list.filter(tagFilter);
        addTagState.tagId = optionTagList.value[0].tagId
          ? optionTagList.value[0].tagId
          : 0;
        addTagVisible.value = true;
      });
    };

    // 添加标签
    const addPicTag = () => {
      addTag(addTagState.tagId, props.picid).then((res) => {
        message.success('添加标签成功');
        addTagVisible.value = false;
        console.log('添加标签');
        emit('on-refresh');
      });
    };

    const cancelAddPicTag = () => {
      addTagVisible.value = false;
    };

    onMounted(() => {
      optionTagList.value = props.tagList;
      optionAlbumList.value = props.albumList;
    });

    return {
      del,
      myTagList,
      optionAlbumList,
      moveAlbumState,
      moveVisible,
      showMoveModal,
      move,
      cancelMove,
      tagColor,
      addTagVisible,
      addTagState,
      showAddTagModal,
      optionTagList,
      addPicTag,
      delPicTag,
      cancelAddPicTag
    };
  }
});
</script>
